<template>
  <div id="addAdministration">
    <div class="title">
      <Icon size="18" type="md-list-box"/>
      添加离职人员
      <Divider/>
    </div>
    <div class="from">
      <Form ref="formValidate" :label-width="170" :model="formValidate" inline>
        <div class="fromTitle">基础信息</div>
        <div class="fromItem">
          <FormItem label="姓名：">
            <Input v-model="formValidate.name" placeholder="输入姓名" style="width:500px"/>
          </FormItem>
        </div>
        <div class="fromItem">
          <FormItem label="入职时间：">
            <DatePicker
              v-model="formValidate.hiredate"
              placeholder="选择时间"
              style="width: 500px"
              type="date"
            ></DatePicker>
          </FormItem>
        </div>
        <div class="fromItem">
          <FormItem label="工龄：">
            <Input v-model="formValidate.seniority" placeholder="输入工龄" style="width:500px"/>
          </FormItem>
        </div>
        <div class="fromItem">
          <FormItem label="合同到期时间：">
            <DatePicker
              v-model="formValidate.datedue"
              placeholder="选择时间"
              style="width: 500px"
              type="date"
            ></DatePicker>
          </FormItem>
        </div>
        <div class="fromItem">
          <FormItem label="身份证号码：">
            <Input v-model="formValidate.idcard" placeholder="输入身份证" style="width:500px"/>
          </FormItem>
        </div>
        <div class="fromItem">
          <FormItem label="联系电话：">
            <Input v-model="formValidate.phone" placeholder="输入联系电话" style="width:500px"/>
          </FormItem>
        </div>
        <div class="fromItem">
          <FormItem label="年龄：">
            <Input v-model="formValidate.age" placeholder="输入年龄" style="width:500px"/>
          </FormItem>
        </div>
        <div class="fromItem">
          <FormItem label="性别：">
            <RadioGroup v-model="formValidate.gender">
              <Radio label="男">男</Radio>
              <Radio label="女">女</Radio>
            </RadioGroup>
          </FormItem>
        </div>
        <div class="fromItem">
          <FormItem label="地址：">
            <Input v-model="formValidate.address" placeholder="输入地址" style="width:500px"/>
          </FormItem>
        </div>
        <div class="fromItem">
          <FormItem label="是否加入公会：">
            <RadioGroup v-model="formValidate.gonghui">
              <Radio label="是">是</Radio>
              <Radio label="否">否</Radio>
            </RadioGroup>
          </FormItem>
        </div>
        <div class="fromTitle">社保情况</div>
        <div class="fromItem">
          <FormItem label="养老保险状态：">
            <RadioGroup v-model="formValidate.yanglao">
              <Radio label="在保">在保</Radio>
              <Radio label="弃保">弃保</Radio>
            </RadioGroup>
          </FormItem>
        </div>
        <div class="fromItem">
          <FormItem label="养老入保时间：">
            <DatePicker
              v-model="formValidate.yanglaodate"
              placeholder="选择时间"
              style="width: 500px"
              type="date"
            ></DatePicker>
          </FormItem>
        </div>
        <div class="fromItem">
          <FormItem label="失业保险状态：">
            <RadioGroup v-model="formValidate.shiye">
              <Radio label="在保">在保</Radio>
              <Radio label="弃保">弃保</Radio>
            </RadioGroup>
          </FormItem>
        </div>
        <div class="fromItem">
          <FormItem label="失业入保时间：">
            <DatePicker
              v-model="formValidate.shiyedate"
              placeholder="选择时间"
              style="width: 500px"
              type="date"
            ></DatePicker>
          </FormItem>
        </div>
        <div class="fromItem">
          <FormItem label="医疗、生育保险状态：">
            <RadioGroup v-model="formValidate.yiliaoshengyu">
              <Radio label="在保">在保</Radio>
              <Radio label="弃保">弃保</Radio>
            </RadioGroup>
          </FormItem>
        </div>
        <div class="fromItem">
          <FormItem label="医疗、生育入保时间：">
            <DatePicker
              v-model="formValidate.yiliaoshengyudate"
              placeholder="选择时间"
              style="width: 500px"
              type="date"
            ></DatePicker>
          </FormItem>
        </div>
        <div class="fromItem">
          <FormItem label="工伤保险状态：">
            <RadioGroup v-model="formValidate.gongshang">
              <Radio label="在保">在保</Radio>
              <Radio label="弃保">弃保</Radio>
            </RadioGroup>
          </FormItem>
        </div>
        <div class="fromItem">
          <FormItem label="工伤入保时间：">
            <DatePicker
              v-model="formValidate.gongshangdate"
              placeholder="选择时间"
              style="width: 500px"
              type="date"
            ></DatePicker>
          </FormItem>
        </div>
        <div class="fromTitle">身份证</div>
        <div class="fromItem">
          <FormItem label="证件上传：">
            <template>
              <div v-for="item in uploadList" class="demo-upload-list">
                <template v-if="item.status === 'finished'">
                  <img :src="item.url"/>
                  <div class="demo-upload-list-cover">
                    <Icon size="25" type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
                    <Icon size="25" type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
                  </div>
                </template>
                <template v-else>
                  <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                </template>
              </div>
              <Upload
                ref="upload"
                :before-upload="handleBeforeUpload"
                :default-file-list="defaultList"
                :on-exceeded-size="handleMaxSize"
                :on-format-error="handleFormatError"
                :on-success="handleSuccess"
                :show-upload-list="false"
                action="//jsonplaceholder.typicode.com/posts/"
                multiple
                style="display: inline-block;width:118px;position: relative;color:#ccc"
                type="drag"
              >
                <div class="uploadIcon" style="width: 118px;height:118px;line-height:118px;">
                  <Icon size="30" type="md-add"></Icon>
                </div>
                <div class="uploadBtn">上传图片</div>
              </Upload>
              <Modal v-model="visible" title="View Image">
                <img
                  v-if="visible"
                  :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'"
                  style="width: 100%"
                />
              </Modal>
            </template>
          </FormItem>
        </div>
        <div class="fromItem"></div>
        <div class="fromItem">
          <FormItem label="有效期：">
            <DatePicker placeholder="选择时间" style="width: 500px" type="date"></DatePicker>
          </FormItem>
        </div>
        <div class="fromItem"></div>
        <div style="height:50px;"></div>
        <div class="fromItem">
          <FormItem label>
            <Button icon="md-checkmark-circle" style="margin-right:10px" type="primary">保存</Button>
            <Button icon="md-checkmark-circle" style="margin-right:10px" type="primary">保存后继续添加</Button>
            <Button icon="md-refresh" type="default">重置</Button>
          </FormItem>
        </div>
      </Form>
    </div>
  </div>
</template>
<script>
import '../administration/addAdministration.css'

export default {
  data() {
    return {
      formValidate: {
        name: '',
        hiredate: '',
        seniority: '',
        datedue: '',
        idcard: '',
        phone: '',
        age: '',
        gender: '',
        address: '',
        gonghui: '',
        yanglao: '',
        yanglaodate: '',
        shiye: '',
        shiyedate: '',
        yiliaoshengyu: '',
        yiliaoshengyudate: '',
        gongshang: '',
        gongshangdate: ''
      },
      defaultList: [],
      imgName: '',
      visible: false,
      uploadList: []
    }
  },
  mounted() {
    this.uploadList = this.$refs.upload.fileList
  },
  methods: {
    handleBeforeUpload() {
      const check = this.uploadList.length < 10
      if (!check) {
        this.$Notice.warning({
          title: '上传文件数量不能大于10个！'
        })
      }
      return check
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: 'The file format is incorrect',
        desc:
          'File format of ' +
          file.name +
          ' is incorrect, please select jpg or png.'
      })
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: 'Exceeding file size limit',
        desc: 'File  ' + file.name + ' is too large, no more than 2M.'
      })
    },
    handleRemove(file) {
      const fileList = this.$refs.upload.fileList
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1)
    },
    handleSuccess(res, file) {
      file.url =
        'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar'
      file.name = '7eb99afb9d5f317c912f08b5212fd69a'
    },
    handleView(name) {
      this.imgName = name
      this.visible = true
    }
  }
}
</script>
